<template>
	<view>
		<u-navbar :border-bottom="false" title="添加发票" :title-size="36" :title-bold="true" :title-color="textColor">
		</u-navbar>
		<u-form class="container" :model="form" ref="fapiaoForm" :error-type="['toast']">
			<u-form-item label-position="top" required label="名称" :label-style="labelStyle" prop="name">
				<u-input v-model="form.name" placeholder="请输入名称" />
			</u-form-item>
			<u-form-item label-position="top" required label="纳税人识别号" :label-style="labelStyle" prop="identityNo">
				<u-input v-model="form.identityNo" placeholder="请输入纳税人识别号" />
			</u-form-item>
			<u-form-item label-position="top" required label="地址" :label-style="labelStyle" prop="address">
				<u-input v-model="form.address" placeholder="请输入地址" />
			</u-form-item>
			<u-form-item label-position="top" required label="电话" :label-style="labelStyle" prop="telNo">
				<u-input v-model="form.telNo" placeholder="请输入电话" />
			</u-form-item>
			<u-form-item label-position="top" required label="开户行" :label-style="labelStyle" prop="bankName">
				<u-input v-model="form.bankName" placeholder="请输入开户行" />
			</u-form-item>
			<u-form-item label-position="top" required label="银行账号" :label-style="labelStyle" prop="accountNo">
				<u-input v-model="form.accountNo" placeholder="请输入开银行账号" @input="onInput" @keyup="onInput" @paste="onInput" />
			</u-form-item>
			<u-form-item label-position="top" required label="电子邮箱" :label-style="labelStyle" prop="email">
				<u-input v-model="form.email" placeholder="请输入电子邮箱" />
			</u-form-item>
			<u-form-item label-position="top"  label="收票地址" :label-style="labelStyle" >
				<u-input v-model="form.deliveryAddress" placeholder="请输入发票邮寄地址" />
			</u-form-item>
		</u-form>
		<akLoading isFullScreen :active="loading"></akLoading>
		<set-submit-bt text="保 存" @click="handleSubmit" />
	</view>
</template>

<script>
	import SetSubmitBt from '@/components/set-submit-bt/index.vue';
	import { useShopStore } from '@/store/shop.js';
	import { mapState } from 'pinia';
	export default {
		components: { SetSubmitBt },
		data() {
			return {
				show: false,
				labelStyle: {
					fontSize: '30rpx',
				},
				form: {
					shopId: '',
					name: '',
					identityNo: '',
					address: '',
					telNo: '',
					bankName: '',
					accountNo: '',
					email: '',
				},
				shopId:'',
				loading:false,
				rules: {
					name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
					identityNo: [
						{ required: true, message: '请输入纳税人识别号', trigger: 'blur' },
						{
							pattern: /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/,
							transform(value) {
								return String(value)
							},
							message: '纳税人识别号不正确',
							trigger: 'blur'
						}
					],
					address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
					telNo: [
						{ required: true, message: '请输入电话', trigger: 'blur' },
					],
					bankName: [{ required: true, message: '请输入开户行', trigger: 'blur' }],
					accountNo: [
						{ required: true, message: '请输入银行账号', trigger: 'blur' },
						// { type: 'number', message: '银行卡号为纯数字', trigger: 'blur' },
						// { max: 29, message: '银行卡号最长24位', trigger: 'blur' },
						// { min: 16, message: '银行卡号最短16位', trigger: 'blur' }
					],
					email: [
						{ required: true,  message: '请输入电子邮箱', trigger: 'blur' },
						{ type: 'email', message: '电子邮箱不正确', trigger: 'blur' },
					]
				}
			}
		},
		onLoad(options) {
			this.shopId = options.shopId;
			this.form.shopId = options.shopId;
			// 获取发票 信息
			
			this.getShopInvoice()
		},
		onReady() {
			this.$refs.fapiaoForm.setRules(this.rules)
		},
		computed:{
			...mapState(useShopStore, ['updateInfo'])
		},
		methods: {
			async getShopInvoice() {
				this.loading = true;
				const res = await this.$setHttp.get('api/Shop/GetShopInvoice', { header:{shopId:this.shopId},params: { shopId: this.shopId } });
				this.loading = false;
				if (!res) return
				this.form = Object.assign({}, res.data)
				this.form.accountNo = this.form.accountNo.replace(/(\d{4})(?=\d)/g, '$1 ')
			},
			//操作银行卡
			onInput(event) {
				const accountNo = event
				this.form.accountNo = accountNo.replace(/\D/g, '') // 不允许输入非数字字符
				this.form.accountNo = accountNo.replace(/(\d{4})(?=\d)/g, '$1 ') // 4位
			},
			dayin(event) {
				console.log(event)
			},
			handleSubmit() {
				this.$refs.fapiaoForm.validate(async (valid) => {
					if (!valid) return
					if (this.form.id) {
						const res = await this.$setHttp.put('api/Shop/UpdateShopInvoice', this.form,{header:{shopId:this.shopId}})
					} else {
						const res = await this.$setHttp.post('api/Shop/AddShopInvoice', this.form,{header:{shopId:this.shopId}})
					}
					const invoice = { shopInvoiceConfigs: [this.form] }
					this.updateInfo(invoice)
					this.$u.toast('保存成功', 1000, 'success')
					this.$mHelper.delayedJump()
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>

<style lang="scss" scoped>
	.container {
		padding: 0rpx 70rpx;
	}
	.profile-footer {
		position: fixed;
		z-index: 999;
		width: 100%;
		background-color: #FFFFFF;
		bottom: 0;
		padding: 0 70rpx;
	}
	::v-deep .u-form-item--right__content {
		align-items: flex-end;
	}
</style>
